<template>
  <el-card
    shadow="always"
    style="margin: 2px 5px"
    :body-style="{
      padding: '10px',
      height: 'calc(100vh - 80px)',
      'overflow-y': 'auto',
    }"
  >
    <el-row :gutter="20">
      <el-col :span="8" :offset="0">
        <el-card
          shadow="always"
          :body-style="{
            padding: '20px',
            height: 'calc(calc(100vh - 80px)  / 2 - 100px)',
            'overflow-y': 'auto',
          }"
        >
          <template #header>
            <div>
              <div class="card-title">
                【{{ project?.name }}】项目的第{{ buildOrder }}次执行报告
              </div>
            </div>
          </template>
          <el-row>
            <el-col :span="8">
              <div class="desc-title">模块数</div>
              <el-tag size="large"> {{ result?.moduleCount }}</el-tag></el-col
            >
            <el-col :span="8">
              <div class="desc-title">用例数</div>
              <el-tag size="large"> {{ result?.caseCount }}</el-tag></el-col
            >
            <el-col :span="8"
              ><div class="desc-title">步骤数</div>
              <el-tag size="large"> {{ result?.stepCount }}</el-tag></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="desc-title">成功用例数</div>
              <el-tag type="success" size="large">
                {{ result?.passCount }}</el-tag
              ></el-col
            >
            <el-col :span="8">
              <div class="desc-title">失败用例数</div>
              <el-tag type="danger" size="large">{{
                result?.failCount
              }}</el-tag></el-col
            >
            <el-col :span="8">
              <div class="desc-title">跳过用例数</div>
              <el-tag type="warning" size="large">
                {{ result?.skippedCount }}</el-tag
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="desc-title">开始时间</div>
              <el-tag type="" size="large">
                {{ result?.executeTime }}</el-tag
              ></el-col
            >
            <el-col :span="12">
              <div class="desc-title">结束时间</div>
              <el-tag type="success" size="large">
                {{ result?.finishTime }}</el-tag
              ></el-col
            >
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="16" :offset="0">
        <el-card
          shadow="always"
          :body-style="{
            padding: '10px',
            height: 'calc(calc(100vh - 80px)  / 2 - 80px)',
            'overflow-y': 'auto',
          }"
        >
          <template #header>
            <div>
              <span class="card-title"> 图表展示</span>
            </div>
          </template>
          <el-row style="height: 100%">
            <el-col :span="12">
              <report-pie-chart
                v-if="result"
                width="100%"
                height="100%"
                :chart-data="result"
              ></report-pie-chart>
            </el-col>
            <el-col :span="12">
              <report-stack-chart
                width="100%"
                height="100%"
                :chart-data="resultsInModule"
                v-if="moduleList.length > 0"
              />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-tabs v-model="activeModule" type="border-card">
      <el-tab-pane
        v-for="moduleName in moduleList"
        :key="moduleName"
        :label="moduleName"
        :name="moduleName"
      >
        <el-collapse v-model="activeCase" accordion>
          <el-collapse-item
            v-for="sunnyCase in resultsInModule[moduleName]"
            :key="sunnyCase.id"
            :name="sunnyCase.id"
          >
            <template #title>
              <div class="case-wrapper">
                <span
                  class="card-title"
                  :class="{ 'open-case': sunnyCase.id === activeCase }"
                >
                  {{ sunnyCase.caseName }}
                </span>

                <span style="float: right" :class="sunnyCase.status">
                  {{ sunnyCase.detail }}</span
                >
              </div>
            </template>

            <el-table
              :data="sunnyCase.children"
              border
              fit
              :row-class-name="tableRowClass"
            >
              <el-table-column type="index" width="50" />
              <el-table-column type="expand" label="展开详情" width="100">
                <template #default="{ row }">
                  <div class="detail-wrapper">
                    <span class="detail-title">执行详情</span>
                    <div class="detail-content">{{ row.detail }}</div>
                  </div>
                  <div v-if="row.shotPath" class="detail-wrapper">
                    <span class="detail-title">错误截图</span>
                    <el-image
                      class="detail-image"
                      :src="`http://localhost:18080/sunnyResult/errorShot/${row.id}`"
                      :lazy="true"
                      :preview-src-list="[
                        `/sunny/sunnyResult/errorShot/${row.id}`,
                      ]"
                      hide-on-click-modal
                      preview-teleported
                      fit="fill"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="stepName" label="步骤名" width="150">
              </el-table-column>
              <el-table-column prop="keywords" label="关键字" width="150">
              </el-table-column>
              <el-table-column prop="param1" label="参数1"> </el-table-column>
              <el-table-column prop="param2" label="参数2"> </el-table-column>
              <el-table-column prop="status" label="执行结果" width="100">
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getOneProjectApi } from "@/api/sunnyproject";
import type { SunnyResult } from "@/types/sunnyResult/type";
import { ref, onMounted } from "vue";
import type { SunnyProject } from "@/types/sunnyProject/type";
import {
  getOneResultApi,
  listResultDetailOfResultApi,
} from "@/api/sunnyresult";
import ReportStackChart from "./ReportStackChart.vue";
import ReportPieChart from "./ReportPieChart.vue";
import type {
  ResultInModule,
  SunnyResultDetailTreeNode,
} from "@/types/SunnyResultDetail/type";
import XEUtils from "xe-utils";
const route = useRoute();
//在setup生命周期中做的操作，在所有操作之前（包括onMounted之前）
const resultId = route.params.resultId;
const result = ref<SunnyResult>();

const projectId = route.query.projectId;
const project = ref<SunnyProject>();

const buildOrder = route.query.buildOrder;

const resultsInModule = ref<ResultInModule>({});
const moduleList = ref<string[]>([]);
const activeModule = ref<string>();

const activeCase = ref<number>();

onMounted(() => {
  getProject();
  getResult();
  listResultDetails();
});

function getProject() {
  getOneProjectApi(Number(projectId)).then(({ data }) => {
    project.value = data;
  });
}

function getResult() {
  getOneResultApi(Number(resultId)).then(({ data }) => {
    result.value = data;
  });
}

function listResultDetails() {
  listResultDetailOfResultApi(Number(resultId)).then(({ data }) => {
    let treeResultDetails: SunnyResultDetailTreeNode[] =
      XEUtils.toArrayTree(data);
    treeResultDetails.forEach((caseTreeNode) => {
      //判断用于存储模块和其下的用例数组的对象中，是否包含当前模块名
      if (!resultsInModule.value[caseTreeNode.moduleName]) {
        //如果没有这个模块名的键，那么创建一个，值为空数组
        resultsInModule.value[caseTreeNode.moduleName] = [];
      }
      resultsInModule.value[caseTreeNode.moduleName].push(caseTreeNode);
    });
    moduleList.value = Object.keys(resultsInModule.value);
    activeModule.value = moduleList.value[0];
  });
}

function tableRowClass({ row }: { row: SunnyResultDetailTreeNode }) {
  return row.status;
}
</script>

<style scoped>
.open-case {
  color: var(--el-color-primary);
}
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.desc-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

.detail-image {
  height: 200px;
  margin: 10px 50px;
}

.case-wrapper {
  width: 100%;
  font-weight: bold;
}

.detail-title {
  font-size: larger;
  font-weight: bold;
}

.detail-content {
  font-size: medium;
}

.detail-wrapper {
  padding: 0 30px;
}

.PASS {
  color: #00d82b;
  font-weight: bold;
  width: 50px;
  text-align: right;
}

.FAIL {
  color: #ff0000bd;
  font-weight: bold;
  width: 50px;
  text-align: right;
}

.SKIPPED {
  color: #fac858;
  font-weight: bold;
  width: 50px;
  text-align: right;
}

.el-table :deep(.PASS) {
  --el-table-tr-bg-color: var(--el-color-success-light-5);
  --el-table-row-hover-bg-color: var(--el-color-success-light-7);
}

.el-table :deep(.SKIPPED) {
  --el-table-tr-bg-color: var(--el-color-warning-light-5);
  --el-table-row-hover-bg-color: var(--el-color-warning-light-7);
}

.el-table :deep(.FAIL) {
  --el-table-tr-bg-color: var(--el-color-danger-light-5);
  --el-table-row-hover-bg-color: var(--el-color-danger-light-7);
}
</style>
